<template>
    <div>
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span class="card-title">{{ title }}</span>
                <el-button style="float: right" size="mini" type="primary"
                    @click="() => handleSave(false)">保存</el-button>
                <el-button style="float: right; margin-right: 10px" size="mini" v-if="!this.contact.id"
                    @click="() => handleSave(true)">保存并新增</el-button>
            </div>
            <div class="text item">
                <div>
                    <el-form :model="item" :rules="rules" size="small" ref="itemForm" label-width="100px"
                        label-position="left">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="item.name"></el-input>
                        </el-form-item>
                        <el-form-item label="职务" prop="jobTitle">
                            <el-input v-model="item.jobTitle"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" prop="telephone">
                            <el-input v-model="item.telephone"></el-input>
                        </el-form-item>
                        <el-form-item label="手机" prop="mobilephone">
                            <el-input v-model="item.mobilephone"></el-input>
                        </el-form-item>
                        <el-form-item label="电子邮箱" prop="email">
                            <el-input v-model="item.email"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
import { newGuid } from '@/utils/guidGenerator';

export default {
    components: {
    },
    data() {
        return {
            item: {
                id: null,
                name: null,
                telephone: null,
                mobilephone: null,
                email: null,
                jobTitle: null
            },
            rules: {
                name: [{ required: true, message: "请填写名称", trigger: "blur" }]
            },
            title: "",
        };
    },
    methods: {
        getData() {
            if (this.contact && this.contact.id) {
                this.item = JSON.parse(JSON.stringify(this.contact))
            } else {
                this.item.id = newGuid();
            }
        },
        handleSave(afterAdd) {
            this.$refs.itemForm.validate((valid) => {
                if (valid) {
                    if (afterAdd) {
                        this.$emit("change", this.item, false);
                        this.item = { id: newGuid() };
                    } else {
                        this.$emit("change", this.item, true);
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
    },
    mounted() {
        this.title = this.contact.id ? "编辑" : "新增";
        this.getData();
    },
    props: {
        contact: {
            type: Object,
            default: () => { },
        },
    },
};
</script>
<style scoped></style>